<template>
	<div class="navi">
		<img class="navi-icon" :src="latest?disLeftSrc:leftSrc" alt="" @click="onLeft">
		<div class="title">{{title}}</div>
		<img @click="onRight" class="navi-icon" :src="first?disRightSrc:RightSrc" alt="">
	</div>
</template>
<script>
import leftSrc from './images/triangle@left.png'
import disLeftSrc from './images/triangle.dis@left.png'
import RightSrc from './images/triangle@right.png'
import disRightSrc from './images/triangle.dis@right.png'
//要这样引入src变量，同时路径加./，否则会当字符串渲染或者报错
export default{
	name:'navi',
	data(){
		return{
			leftSrc:leftSrc,
			disLeftSrc:disLeftSrc,
			RightSrc:RightSrc,
			disRightSrc:disRightSrc
		}
	},
	props:{
		title:String,
		first:Boolean,
		latest:Boolean
	},
	methods:{
		onLeft(){
			if(!this.latest){
				this.$emit('left')
			}
		},
		onRight(){
			if(!this.first){
				this.$emit('right')
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
.navi{
  width:80%;
  height:40px;
  background-color: #f7f7f7;
  border-radius:2px;
  display:inline-flex;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}

.navi-icon{
  height:40px;
  width:40px;
}

.title{
  font-size:28rpx;
}

</style>